example: add image
Codes:
<div>
<img src="../pics/smiley.png" alt="Smiley">
</div>
Revision:
use the img tag in HTML to add an image to HTML content. Two attributes for the image tag have to be specified: the "src" and "alt" attributes.
the src attribute is a required attribute, which specifies where the image is.
the alt attribute acts as a placeholder if the image can't be displayed or found. It gives a description of the image.
Codes:
<div>
<img src="../pics/smiley.png" alt="Smiley">
</div>
the width of an image is set by using the width property.
Codes:
<style>
img{width: 200px;}
</style>
<div>
<img src="../pics/smiley.png" alt="Smiley">
</div>
Codes:
<style>
.img-1{width: 15%;}
</style>
<div>
<img class="img-1" src="../pics/smiley.png" alt="Smiley">
</div>
the height of an image is set by using the height property.
Codes:
<style>
.img-2{height: 150px;}
</style>
<div>
<img class="img-2" src="../pics/smiley.png" alt="Smiley">
</div>
Codes:
<style>
.img-3{height: 25%;}
</style>
<div>
<img class="img-3" src="../pics/smiley.png" alt="Smiley">
</div>
to add a border to an image, we use the border property. The border property is shorthand for three properties:
border-width specifies the width of the border.
border-style specifies what style the border will be; there are several values that can be applied.
border-color specifies the color of the border.
when specifying the border, the order is: border: border-width border-style border-color.
Codes:
<style>
.img-4{width:200px; height: 45%; border: 3px solid green;}
</style>
<div>
<img class="img-4" src="../pics/smiley.png" alt="Smiley">
</div>
the values of the border-color property can be set using color names (e.g. red)., hexadecimal (e.g. #ff0000), RGB values (e.g. rgb(255,0,0)), or HSL values (e.g. hsl(0, 100%, 50%)).
the border-width property can be specified using units such as px, percentage(%), rem, and em.
the border-style property has several values:
solid: draws a solid line around the image;
dashed: draws square dashes around the image;
dotted: draws a dotted line around the image;
double: draws two lines around the image;
none: this is the default value where no border is drawn;
hidden: the border is invisible.
the object-fit property defines how an image will resize within a <div> element. The object-fit property has several values:
cover: this preserves the aspect ratio of the image while filling the container; if the aspect ratio of the container is smaller than the aspect ratio of the image, the image is cropped to fit the container.
contain: the image preserves its aspect ratio but gets resized to fill the container.
fill: this is the default value; here the image gets resized to fill the container; it does not preserve the aspect ratio of the image; the image gets stretched to fit the container;
scale-down: the image will choose either none or contain to obtain the smallest possible size of the image;
none: the image does not get resized.
the border-radius property creates rounded images by rounding the borders around the image.
Codes:
<style>
.img-5{width:200px; height: 200px; border: 10px solid green; border-radius: 15px; object-fit:cover;}
</style>
<div>
<img class="img-5" src="../pics/smiley.png" alt="Smiley">
</div>
The units used for border-radius include pixels(px) and percentage(%).
to create transparent images, the opacity property can be used.
It can take a range of values between 0.0 and 1.0.
The default value is 1.
To make the image more transparent, use a value lower than 1. The lesser the value the more transparent the image will be.
Codes:
<style>
.img-6{width:200px; height: 200px; border: 10px solid green; border-radius: 15px; object-fit:cover; opacity:0.5;}
</style>
<div>
<img class="img-6" src="../pics/smiley.png" alt="Smiley">
</div>
the object-position property specifies the alignment of the content within the container.
it is used with the object-fit property to define how an element - like <video> or <img> - is positioned with x/y coordinates in its content box.
when using the object-fit property, the default value for object-position is 50% 50%. So, by default, all images are positioned in the center of their content box.
The default alignment can be changed by using the object-position property.
the object-position property accepts two numerical values:
the first value controls the x-axis;
the second value controls the y-axis;
negative values are allowed.
Also can be used the string such as "left", "right", or "center", etc. for positioning the image in the container;
Codes:
<style>
.img-7{width:400px; height: 400px; border: 10px solid green; border-radius: 15px; object-fit:none; object-position:right top;}
</style>
<div>
<img class="img-7" src="../pics/smiley.png" alt="Smiley">
</div>
the image-rendering property sets an image scaling algorithm to sharpen images. When an image is upscaled, the browser smoothens the image, so it doesn't look pixelated. But, depending on the resolution of the image and screen, this might not be the best at all times. This browser behavior can be controlled with the image-rendering property.
syntax: image-rendering: auto | crisp-edges | pixelated | initial | inherit;
auto: a standard algorithm maximizing the appearance of an image; this is the default value of this property.
crisp-edges: the values of the image is preserved without smoothing or blurring. The crisp-edges value maintains the color contrast between pixels.
pixelated: the browser preserves its pixelated style by using nearest-neighbour scaling. When "pixelated" is used, the nearby pixels of a pixel might take up its appearance, making it seem like together they form one big pixel, great for high-resolution screens.
initial: makes the property use its default value.
inherit: inherits the property from its parents element.
Codes:
<style>
.img-8{width:400px; height: 400px; border: 10px solid green; border-radius: 15px; object-fit:none; image-rendering: pixelated;}
</style>
<div>
<img class="img-8" src="../pics/smiley.png" alt="Smiley">
</div>
the vertical-align property can align an inline element inside an inline box, and thus can be used to align an image in a line of text. Vertical-align only applies to inline, inline-block and table-cell elements. You can't use it to vertically align block-level elements.
It takes a fair number of values that can be applied to an inline element:
baseline: aligns the baseline of the element with the baseline of its parent;
text-top: aligns the top of the element with the top of the parent element's font;
middle: aligns the middle of the element with the baseline plus half the x-height of the parent.;
text-bottom: aligns the bottom of the element with the bottom of the parent element's font;
sup: aligns the baseline of the element with the superscript-baseline of its parent;
sub: aligns the baseline of the element with the subscript-baseline of its parent.
<length>: aligns the baseline of the element to the given length above the baseline of its parent; a negative value is allowed;
<percentage>: aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property; a negative value is allowed;
top: aligns the top of the element and its descendants with the top of the entire line;
bottom: aligns the bottom of the element and its descendants with the bottom of the entire line.
the image-resolution property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as 'background-image'). The intrinsic resolution of an image is used to determine the image's intrinsic dimensions.
The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the image-resolution property allows a different resolution to be specified.
syntax: image-resolution: [from-image || <resolution>] && snap
from-image: the image's intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to '1ddpx' (1 image pixel per CSS px unit).
<resolution> specifies the intrinsic resolution explicitly. A 'dot' in this case corresponds to a single image pixel.
snap: if the 'snap' keyword is provided, the computed '<resolution>' (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels.
Codes:
<style>
.img-9{width:400px; height: 400px; border: 10px solid green; border-radius: 15px; object-fit:none;
image-resolution: from-image 300dpi ;}
</style>
<div>
<img class="img-9" src="../pics/smiley.png" alt="Smiley">
</div>
the image-orientation property specifies a layout-independent correction to the orientation of an image. Possible values are:
none: does not apply any additional image rotation; the image is oriented as encoded or as other CSS property values dictate.
from-image: default initial value. The EXIF information contained in the image is used to rotate the image appropriately.
this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. It should not be used for arbitrary rotations.
Five basic CSS effects can be used to customize website images:
1/ rounded corners: just set the "border-radius" property with a value in "px, "em", or "%" format.
each corner can also be configured separately, creating different shapes. To do that, specify values in the order of top-left, top-right, bottom-right, and bottom-left.
2/ image thumbnails: serving as placeholders for links to another site or page, thumbnails are especially useful in product galleries on e-commerce sites.To create a thumbnail, specify its image properties.
img{border: 2px solid blue; border-radius: 3px; padding: 5px; width: 350px;}
3/ full-page backgrounds: to create a full-page background, add the "background-size:" property to the "main" or "body" styling and then specify how you want the background to be filled. Here are the options:
auto: sets the original size;
length: sets the image length;
percentage: sets the image width and height as a percentage of the parent element;
cover: resizes the image to cover the viewport, sometimes necessitating stretching or cropping;
contain: resizes the image to the maximum size that can fit into the viewport without cropping.
"background-size:" is often combined with "background-position: center;" - which centers the image in the viewport - and with "background-repeat: no-repeat;" - which ensures a once-only display.
4/ responsive image sizes: to make an image fully responsive, define several media queries in the CSS code that specify which image to display for each screen size.
5/ image transformations: with the "transform property", you can apply a two-dimensional (2D) or three-dimensional (3D) effect to images.
"transform" offers options for scaling, rotating, skewing, and changing image perspectives.
When combined with JavaScript or animation modules, this property can add active rotations or movement to images.
With CSS, you can create dynamic effects, a common one of which is hover.
This styling, which changes the selected element on a mouseover of the element, temporarily applies another image effect.
For example, you can change the image itself or its size, or display text over it.
Warning: Hover pseudo classes can cause bugs on mobile browsers like Chromium.
a/ switch between two images on hover: one way to apply rollover image effects is to seemingly fade between images when the user hovers over them. You do that by stacking one image on top of the other and changing the opacity of the top image.
<div id="fade_out">
<img class="bottom" src="/images/image1.jpg" />
<img class="top" src="/images/image2.jpg" />
</div>
<style>
#fade_out {position:relative; height:100%; width:auto; margin:0 auto;}
#fade_out img {position:absolute; left:0; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; transition: opacity 2s linear;}
#fade_out img.top:hover { opacity:0;}
</style>
<div id="fading">
<img class="bottom" src="banner55.jpg" />
<img class="top" src="banner02.jpg" />
</div>
<style>
@keyframes FadeInOut {
0% {opacity:1;}
25% {opacity:.75;}
50% {opacity:.5;}
100% {opacity:0;}
}
</style>